import { Graph } from "@antv/x6";
import { useEffect } from "react";
import { Scroller } from "@antv/x6-plugin-scroller";
import { registerIcons } from "./const";

let graph: Graph;

registerIcons();

const AntvDemos = () => {
  useEffect(() => {
    graph = new Graph({
      container: document.getElementById("graph-demo")!,
      background: {
        color: "#F2F7Fa",
      },
      autoResize: true,
      panning: true,
    });
    graph.use(
      new Scroller({
        graph: graph,
        enabled: true,
        pageVisible: true,
        pageBreak: true,
        pannable: true,
      })
    );

    graph.addNode({
      x: 100,
      y: 160,
      shape: "custom-node",
    });
    graph.addNode({
      x: 400,
      y: 160,
      shape: "breaker-closed",
    });
    graph.addNode({
      x: 500,
      y: 160,
      shape: "breaker-open",
    });
    graph.addNode({
      x: 600,
      y: 160,
      shape: "charge-pile",
    });
    graph.addNode({
      x: 100,
      y: 260,
      shape: "inverter",
    });
    graph.addNode({
      x: 200,
      y: 260,
      shape: "photovoltaic",
    });
    graph.addNode({
      x: 300,
      y: 260,
      shape: "mppt",
    });
    graph.addNode({
      x: 400,
      y: 260,
      shape: "battery",
    });
    graph.addNode({
      x: 500,
      y: 260,
      shape: "string-inverter",
    });
    graph.addNode({
      x: 600,
      y: 260,
      shape: "air-conditioner",
    });
    graph.addNode({
      x: 700,
      y: 260,
      shape: "transformer",
    });
    graph.addNode({
      x: 800,
      y: 260,
      shape: "parking",
    });
    graph.addNode({
      x: 900,
      y: 260,
      shape: "vehicle",
    });
  }, []);

  return (
    <div id="graph-demo" style={{ width: "100%", height: "100%" }}>
      demos
    </div>
  );
};

export default AntvDemos;
